<!--
 * @Author: zsc
 * @Date: 2022-06-13 21:56:52
 * @LastEditors: zsc
 * @LastEditTime: 2022-07-26 22:03:16
 * @Description:
-->

<template>
  <div class="app-container">
    <el-card>
      <entrance />
    </el-card>
    <el-card class="app-container-tools">
      <div class="app-container-tools-search">
        <span>企业名称</span>
        <el-input v-model="WHERE.search" class="k-width-150-p k-mr-10" />
        <span>归属楼宇：</span>
        <buliding-select v-model="WHERE.building_id" />
        <!-- <span>状态：</span>
        <el-select v-model="WHERE.status" placeholder="请选择" class="k-width-100-p">
          <el-option
            v-for="item in companySizeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <el-button type="primary" @click="_search">查询</el-button>
        <el-button type="primary" @click="_reset">重置</el-button>
        <el-button v-permission="['BD:COMPANY:EDIT']" class="k-mr-10"> <el-upload
          action=""
          :show-file-list="false"
          :multiple="false"
          :file-list="fileList"
          :before-upload="uploadChangeHandel"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        >导入</el-upload>
        </el-button></div>
      <div class="app-container-tools-action">
        <!-- <el-button v-permission="['BD:COMPANY:ADD']" type="primary" style=" margin-left: 10px" @click="handleCreate">导出</el-button> -->
        <!--        <el-button v-permission="['BD:COMPANY:IMPORT']" style=" margin-left: 10px" @click="handleImport">导入</el-button>-->
      </div>
    </el-card>
    <!--    功能-->
    <!--    查询条件-->
    <el-card>
      <!--    表格-->
      <el-table
        ref="tb"
        v-loading="LOADING"
        :data="TABLE_DATA"
        :size="SIZE"
        border
        :height="LIST_HEIGHT"
        style="width: 100%"
        @selection-change="_handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <template v-for="(item) in setting">
          <el-table-column
            v-if="item.key === 'action'"
            :key="item.id"
            :label="item.name"
            :prop="item.key"
            :width="item.value"
            :fixed="item.fixed"
          >
            <template slot-scope="scope">
              <!-- <el-button @click="handleKeepAttendance(scope.row)">查看考勤</el-button> -->
              <el-button v-permission="['DataAnalysis:Company']" @click="handleExoport(scope.row)">企业信息采集表导出</el-button>
              <el-button @click="handlePerson(scope.row)">人员信息</el-button>
              <el-button @click="handleScan(scope.row)">企业信息</el-button>
              <el-button v-permission="['BD:COMPANY:EDIT']" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button v-permission="['BD:COMPANY:DEL']" @click="handleDel(scope.row)">删除</el-button>
            </template>

          </el-table-column>
          <el-table-column
            v-else-if="item.key === 'room_display'"
            :key="item.id"
            :label="item.name"
            :prop="item.key"
            :width="item.value"
            :fixed="item.fixed"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.rooms.reduce((pre,cur)=>{
                  return pre+cur.name+','
                },'')
              }}
              </span>
            </template>

          </el-table-column>
          <el-table-column
            v-else
            :key="item.id"
            :label="item.name"
            :prop="item.key"
            :width="item.value"
          />
        </template>
      </el-table>
      <!--    分页-->
      <pagination />
      <!--    弹窗-->
      <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" @refresh="_search" />
      <scan-modal :visible.sync="scanVisible" :data="scanId" />
      <person-modal :visible.sync="personVisible" :company-id="companyId" :company-name="companyName" />
      <calendar-modal :visible.sync="ATTENDANCE_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" />
      <el-dialog :visible.sync="qrcode_visible" @opened="handelqr()">
        <div style="width: 210px;height: 210px;margin: auto;border: #000 1px solid;display: flex">
          <div ref="qrcode" style="margin: auto" />
        </div>
      </el-dialog>
      <el-dialog :visible.sync="excle_visible">
        <export-modal :key="companyId" :company-id="companyId" :company-name="companyName" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import list from '@/list'
import CompanyClass from '@/models/company-class'
import { companyGetList, companyBulkCreate } from '@/api/company'
import { companySizeOptions } from '@/list/data'
import formModal from './components/form'
import calendarModal from './components/keepAttendance'
import scanModal from './components/scan'
import bulidingSelect from '@/components/Select/BulidingSelect'
import personModal from './components/person/personList'
import QRCode from 'qrcodejs2'
import entrance from '@/views/entrance'
import exportModal from './components/export'
import * as XLSX from 'xlsx'
const companyClass = new CompanyClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { formModal, calendarModal, scanModal, bulidingSelect, personModal, entrance, exportModal },
  mixins: [list],
  data() {
    return {
      companySizeOptions,
      caseRequestURLType: '',
      scanVisible: false,
      scanId: 0,
      setting: companyClass.list(),
      ATTENDANCE_VISIBLE: false,
      qrcode_visible: false,
      qrcode: null,
      personVisible: false,
      excle_visible: false,
      companyId: 0,
      companyName: '',
      WHERE: {

      },
      fileList: []

    }
  },
  created() {
    this.LIST_API = companyGetList
  },
  mounted() {
  },
  methods: {
    handleCreate() {
      console.log('添加')
      this.FORM_TYPE = 'create'
      this.FORM_VISIBLE = true
      this.FORM_DATA = {}
    },
    handleEdit(item) {
      console.log('更新')
      this.FORM_TYPE = 'edit'
      this.FORM_VISIBLE = true
      this.FORM_DATA = item
    },
    handleScan(item) {
      console.log('查看')
      this.scanVisible = true
      this.scanId = item.id
    },
    handleImport() {
      console.log('导入')
      this.$notify.success('导入')
    },
    handleKeepAttendance(item) {
      console.log('考勤')
      this.FORM_TYPE = 'create'
      this.ATTENDANCE_VISIBLE = true
    },
    handleqrcode(item) {
      this.companyId = item.id
      this.qrcode_visible = true
    },
    handelqr() {
      if (this.qrcode) {
        this.qrcode.makeCode(`https://data.citylaboratory.cn/user?company_id=${this.companyId}`)
      } else {
        this.qrcode = new QRCode(this.$refs.qrcode, {
          text: `https://data.citylaboratory.cn/user?company_id=${this.companyId}`,
          width: 210,
          height: 210,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    },
    handleDel(item) {
      console.log('删除', item)
      this.$confirm('确认删除？')
        .then(_ => {
          this._showSuccess('删除成功')
        })
        .catch(_ => {})
    },
    handlePerson(item) {
      console.log('人员信息', item)
      this.companyId = item.id
      this.companyName = item.name
      this.personVisible = true
    },
    handleExoport(item) {
      console.log('企业信息采集表')
      this.companyId = item.id
      this.companyName = item.name
      this.excle_visible = true
    },
    csvToArray(str, delimiter = ',') {
      const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter)
      const row_data = str.slice(str.indexOf('\n') + 1).split('\n')
      const arr = row_data.map(function(row) {
        const values = row.split(delimiter)
        const el = header_cols.reduce(function(object, header, index) {
          object[header] = values[index]
          return object
        }, {})
        return el
      })
      return arr
    },
    /**
     * 临时使用
     * TODO
     */
    async uploadChangeHandel(file) {
      const reader = new FileReader(file)
      reader.readAsBinaryString(file)
      reader.onload = async(e) => {
        const data = e.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const sheet = workbook.Sheets
        var aoa = XLSX.utils.sheet_to_csv(sheet[workbook.SheetNames[0]])
        const arrData = this.csvToArray(aoa, ',').filter(
          (p) => { return p['企业名称'] }
        )
        console.log(arrData)
        const upData = arrData.map((p) => {
          return {
            building_id: 23,
            name: p['企业名称'],
            house_address: p['办公地址'],
            legal_person: p['法人'],
            legal_person_mobile: p['联系方式'],
            region_id: 34,
            code: p['统一社会信用代码']
          }
        })
        companyBulkCreate({ upData }).then(
          p => {
            this.$notify({
              title: 'Success',
              dangerouslyUseHTMLString: true,
              message: `
            操作成功!
          `,
              type: 'success'
            })
            this._getList()
          }
        )

        // await focusCreate({ list: upData })
      }
      this.fileList = []
      return false
    }
  }
}
</script>
<style lang="scss">
 @import '@/styles/list/index.scss';
</style>
